<template>
  <el-row class="article-box">
    <el-col :sm="18" :xs="24">
      <div class="article-content-box">
        <h1>{{title}}</h1>
        <div class="article-info">
<!--          <router-link to="/user?id=1"></router-link>-->
          <p>
            <span class="article-info-user mr-20" @click="goPage('/user/'+ author)">{{author}}</span>&nbsp;
            <span class="mr-20">{{publish_time}}</span>
            <el-tooltip effect="light" :content="isCollected ? '取消收藏' : '收藏'" placement="top">
              <span :class="isCollected ? 'article-info-collected' : 'article-info-collect'" @click="handleCollectArticle()">
                <i :class="isCollected ? 'el-icon-star-on' : 'el-icon-star-off'"></i>
                <span v-show="isCollected">已</span>收藏
              </span>
            </el-tooltip>
          </p>
          <p class="article-info-classify" v-show="classifies.length > 0">
            分类：
            <el-button size="mini" round v-for="classify in classifies" :key="classify.id">{{classify.classify_name}}</el-button>
          </p>
        </div>
        <div class="article-content" v-html="content">
          <h1>11111</h1>
        </div>

<!--        <div v-outline="{-->
<!--              callback: refreshNavTree,-->
<!--              selectors: ['h1', 'h2', 'h3'],-->
<!--              exceptSelector: '[un-nav]',-->
<!--            }">-->
<!--          <h1></h1>-->
<!--          <div class="article-content" v-html="content"></div>-->
<!--        </div>-->

      </div>
      <div class="comment-editor-box">
        <h2 style="margin-bottom: 10px">评论</h2>
        <comment-editor @submit="handleComment"></comment-editor>
      </div>
      <!--        评论           -->
      <div class="reply-list-box">
        <template v-for="(comment,index) in commentList" >
          <ReplyBox :key="index" :comment="comment" :articleID="articleID" @add_comment="addComment($event)"
                    style="border-top: 1px solid #e5e9ef; padding-top: 10px;" :parentID="comment.id">
          </ReplyBox>
        </template>
      </div>
    </el-col>
    <el-col :sm="6" :xs="0">
      <div class="article-catalog">
<!--        <div class="catalog-title">导航目录</div>-->
<!--        <outline-tree :treeData="articleTree" class="tree">-->
<!--          <ul slot-scope="{ data, parentData, level }">-->
<!--            <li-->
<!--                class="node-render-content"-->
<!--                @click.stop="jumpToAnchor(data.el)">-->
<!--              {{ data.title }}-->
<!--            </li>-->
<!--          </ul>-->
<!--        </outline-tree>-->
        <side-catalog
            class="catalog"
            v-bind="catalogProps"
        >
          <template #default="{level, isActive}">
            <i :class="['line-style', isActive ? 'line-style--active' : '']"></i>
          </template>
        </side-catalog>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import Prism from "@/assets/js/prism";
import {cancelCollectArticle, collectArticle, commentArticle, getArticle, listArticleComment} from "@/api/apis";
import SideCatalog from 'vue-side-catalog'
import 'vue-side-catalog/lib/vue-side-catalog.css'
import ReplyBox from "@/components/ReplyBox";
// import "@/assets/css/prism.css";
export default {
  name: "Article",
  components: {
    SideCatalog,
    ReplyBox,
  },
  data(){
    return{
      title: '',
      author: '',
      publish_time: '',
      classifies: [],
      tags: [],
      content: '',
      articleTree: [],
      articleID: '',
      isCollected: false,
      commentList: [],
      // 目录
      catalogProps:{
        container: ".article-content",
        levelList: ["h1", "h2", "h3", "h4", "h5"],
        height: "calc(100% - 100px)",
        title: "目录",
        iconLeft: true,
        lineLeft: 0,
        watch: true,
      },
    }
  },
  created() {
    let id = this.$route.query.id
    if(id){
      this.articleID = id
      getArticle(id).then(response => {
        this.title = response.data.title
        this.author = response.data.author
        this.publish_time = response.data.publish_time
        // response.data.classifies.forEach(item => {
        //   this.classifies.push(item.classify_name)
        // })
        // response.data.tags.forEach(item => {
        //   this.tags.push(item.tag_name)
        // })
        this.classifies = response.data.classifies
        this.tags = response.data.tags
        this.content = response.data.content + '\n'
        setTimeout(() => {
          this.content = response.data.content
          setTimeout(() => {
            Prism.highlightAll() // 这里加定时器让它后执行，不然没效果
          }, 0)
        }, 500)
        this.isCollected = response.data.is_collected
        setTimeout(() => {
          Prism.highlightAll() // 这里加定时器让它后执行，不然没效果
        }, 0)
      }).catch(() => {
        this.$router.push({path: '/404'})
      })
    }else{
      this.$router.push({path: '/404'})
    }
    // 添加 title
    setTimeout(() => {
      document.title = this.title
    }, 200)
    // 获取该文章相关评论
    this.handleListArticleComments()
  },
  mounted() {
    // let id = this.$route.query.id
    // if(id){
    //   this.articleID = id
    //   getArticle(id).then(response => {
    //     this.title = response.data.title
    //     this.author = response.data.author
    //     this.publish_time = response.data.publish_time
    //     this.classifies = response.data.classify_value
    //     this.content = response.data.content
    //     this.isCollected = response.data.is_collected
    //     setTimeout(() => {
    //       Prism.highlightAll() // 这里加定时器让它后执行，不然没效果
    //     }, 0)
    //   }).catch(() => {
    //     this.$router.push({path: '/404'})
    //   })
    // }else{
    //   this.$router.push({path: '/404'})
    // }
  },
  methods: {
    refreshNavTree (treeData) {
      this.articleTree = treeData
    },
    jumpToAnchor (element) {
      element.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
    },
    goPage(path){
      this.$router.push({path: path})
    },
    handleCollectArticle(){
      if (this.isCollected){
        let ids = [this.articleID]
        this.$confirm('取消收藏?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          cancelCollectArticle({'ids': ids}).then(response => {
            this.$message({
              type: 'success',
              message: response.message
            });
            this.isCollected = false
          }).catch(err => {
            console.log(err)
            this.$message({
              type: 'error',
              message: err.data.message
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消该操作'
          });
        })
      }else{
        collectArticle(this.articleID).then(response => {
          this.$message.success(response.message)
          this.isCollected = true
        }).catch(err => {
          this.$message.warning(err.data.message)
        })
      }
    },
    handleComment(content){
      let params = new URLSearchParams()
      params.append('article_id', this.articleID)
      params.append('content', content)
      commentArticle(params).then(response => {
        this.$message.success('评论成功')
        this.handleListArticleComments()
        document.querySelector(".comment-editor .content").innerText=''
      }).catch(err => {
        // console.log(err)
        this.$message.error('评论失败')
      })
    },
    handleListArticleComments(){
      let params = new URLSearchParams()
      params.append('article_id', this.articleID)
      listArticleComment(params).then(response => {
        this.commentList = response.data
      }).catch(err => {
        this.$message.error('获取评论出错')
      })
    },
    addComment(data){
      this.handleListArticleComments()
      // 新回复的二级评论添加到行首 不删新页面
      // this.commentList.inner_comments.unshift(data)
      // 新回复的二级评论添加到行尾 不删新页面
      // this.comment.inner_comments.push(data)
    },
  }
}
</script>

<style scoped>
@import "../assets/css/prism.css";
  .article-box{
    margin-top: 20px;
  }
  .article-content-box{
    word-wrap: break-word;
    word-break: break-all;
    margin-right: 20px;
    padding: 20px;
    height: 100%;
    background-color: #ffffff;
  }
  /* 文章信息 */
  .article-info{
    margin: 10px 0;
    padding: 10px 20px;
    background: #f8f8f8;
    border-radius: 3px;
  }
  .article-info-classify{
    margin-top: 10px;
  }
  .article-catalog{
    height: 500px;
    /*background-color: #1177b0;*/
  }
  .catalog-title {
    font-size: 1rem;
    border-bottom: 1px solid #c9c9c9;
    margin: .5rem;
  }
  .node-render-content {
    /*color: #3361D8;*/
    color: #475164;
    user-select: none;
    cursor: pointer;
    margin: 2px 0;
  }
  .node-render-content:hover {
    /*text-decoration: underline;*/
    color: #0f59a4;
  }
  .node-render-content:active {
    position: relative;
    left: 1px;
    top: 1px;
  }
  .article-catalog{
    position: fixed;
  }
  @media screen and (max-width: 767px){
    .article-box{
      padding: 0 20px;
    }
  }
  @media screen and (min-width: 768px){
    .article-box{
      padding: 0 100px;
    }
  }
  .article-info-user{
    cursor: pointer;
  }
  .article-info-user:hover{
    color: #ee3f4d;
  }
  .mr-20{
    margin-right: 20px;
  }
  .article-info-collect {
    cursor: pointer;
  }
  .article-info-collect:hover {
    color: #ff6c14;
  }
  .article-info-collected {
    cursor: pointer;
    color: #ff6c14;
  }
  .article-info-collected:hover {
    color: #000000;
  }
  .line-style {
    display: inline-block;
    height: 20px;
    width: 3px;
    background: transparent;
  }
  .line-style--active {
    background: currentColor;
  }

/* 评论输入框 */
  .comment-editor-box {
    background-color: #FFFFFF;
    padding: 20px;
    margin: 20px 20px 0 0;
  }
/* 评论框  */
  .reply-list-box {
    padding: 20px;
    margin: 20px 20px 20px 0;
    background-color: #FFFFFF;
  }
</style>
